<template>
  <div class="LetTop">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <a-select
      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
      v-model="active"
      class="rightTopSelect"
      @select="select"
    >
      <a-select-option
        v-for="item in selectList"
        :key="item.value"
        :value="item.value"
        >{{ item.name }}</a-select-option
      >
    </a-select>
    <div class="appealCount">
      <img src="../assets/rightBottom2.png" alt="" />
      <span class="title">总排污量</span>
      <div class="count">{{ count }}<span>吨</span></div>
    </div>
    <div class="main">
      <div class="left">
        <div class="bar">
          <wtzl ref="wtzl" />
          <img src="../assets/leftTop2.png" alt="" />
        </div>
        <div class="card">
          <img src="../assets/card.png" alt="" />
          <div>各企业排污量占比</div>
        </div>
      </div>
      <div class="right">
        <div class="icon"><img src="../assets/leftIcon.png" alt="" /></div>
        <div class="list">
          <transition-group name="indeName">
            <div
              class="line"
              v-for="(item, index) in dataList"
              :key="item.street"
              :class="index === 0 ? 'item-active' : ''"
            >
              <div class="title">
                <div class="area">
                  <div :style="{ background: item.background }"></div>
                  {{ item.street }}
                </div>
                <div class="des">{{ item.value }} ({{ item.present }}%)</div>
              </div>
              <div class="scroll">
                <div :style="{ width: item.present + '%' }"></div>
                <img
                  src="../assets/arc.png"
                  :style="{ left: item.present + '%' }"
                  alt=""
                />
              </div>
            </div>
          </transition-group>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from "lodash";
import wtzl from "@/components/pages/wtzl";
// import { appealSourcePresent } from "@/api/serve";
import { Json } from "./config/leftTop";
export default {
  name: "LetTop",
  props: {},
  components: { wtzl },
  data() {
    return {
      dataList: [],
      loopCenterIdx: 0,
      timer: null,
      count: 0,
      colorList: [
        {
          color: "rgba(65, 143, 255, 1)",
          background: "linear-gradient( 180deg, #418FFF 0%, #1F20FF 100%)",
        },
        {
          color: "rgba(140, 243, 90, 1)",
          background: "linear-gradient( 180deg, #8CF35A 0%, #57FF41 100%)",
        },
        {
          color: "#FF9A41",
          background: "linear-gradient( 180deg, #FF9A41 0%, #FF9175 100%)",
        },
        {
          color: "#FF8AE0",
          background: "linear-gradient( 180deg, #FF8AE0 0%, #FF43C5 100%)",
        },
        {
          color: "#41C5FF",
          background: "linear-gradient( 180deg, #41C5FF 0%, #1F94FF 100%)",
        },
        {
          color: "#5AF3B8",
          background: "linear-gradient( 180deg, #5AF3B8 0%, #41FFF6 100%)",
        },
        {
          color: "#FFDA75",
          background: "linear-gradient( 180deg, #FFDA75 0%, #FFCC41 100%)",
        },
        {
          color: "#EB5D39",
          background: "linear-gradient( 180deg, #EB5D39 0%, #FF4343 100%)",
        },
        {
          color: "#ACACAC",
          background: "linear-gradient( 180deg, #ACACAC 0%, #FFFFFF 100%)",
        },
      ],
      active: 1,
      selectList: [
        { name: "站房1", value: 1 },
        { name: "站房2", value: 2 },
        { name: "站房3", value: 3 },
        { name: "站房4", value: 4 },
        { name: "站房5", value: 5 },
        { name: "站房6", value: 6 },
        { name: "站房7", value: 7 },
        { name: "站房8", value: 8 },
        { name: "站房9", value: 9 },
        { name: "站房10", value: 10 },
        { name: "站房11", value: 11 },
        { name: "站房12", value: 12 },
        { name: "站房13", value: 13 },
        { name: "站房14", value: 14 },
        { name: "站房15", value: 15 },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      // appealSourcePresent().then((res) => {
      const res = Json;
      const d = res.data.result;
      this.count = d.count || 0;
      const arr = d.countMapList || [];
      let index = 0;
      this.dataList = arr.map((item) => {
        index++;
        if (index >= this.colorList.length - 1) {
          index = 0;
        }
        return {
          street: item.name,
          name: item.name,
          value: item.resultCount,
          color: this.colorList[index].color,
          present: item.present,
          itemStyle: {
            color: this.colorList[index].color,
          },
          background: this.colorList[index].background,
        };
      });
      this.$refs.wtzl.setData(this.dataList);
      this.$refs.wtzl.highLightByName(this.dataList[0].street);

      this.autoLoop();

      // this.handleNext();
      // });
    },
    select() {},
    autoLoop() {
      this.timer = setInterval(() => {
        this.handleLoop();
      }, 6000);
    },
    handleLoop() {
      this.handleNext();

      // if (checkId === this.loopCenterIdx) {
      //   return;
      // }
      // if (checkId > this.loopCenterIdx) {
      //   if (this.loopCenterIdx === 0 && checkId === 4) {
      //     return this.handleLast(checkId);
      //   } else {
      //     return this.handleNext(checkId);
      //   }
      // }

      // if (checkId < this.loopCenterIdx) {
      //   if (checkId === 0 && this.loopCenterIdx === 4) {
      //     return this.handleNext(checkId);
      //   } else {
      //     return this.handleLast(checkId);
      //   }
      // }
    },
    handleNext() {
      // this.loopCenterIdx = this.loopCenterIdx - 1 < 0 ? this.dataList.length - 1 : this.loopCenterIdx - 1;
      const arr = cloneDeep(this.dataList);
      arr.push(arr.shift());
      this.dataList = arr;
      if (this.$refs.wtzl)
        this.$refs.wtzl.highLightByName(this.dataList[0].street);
    },

    // 上一张
    // handleLast() {
    //   this.loopCenterIdx = this.loopCenterIdx + 1 > this.dataList.length - 1 ? 0 : this.loopCenterIdx + 1;
    //   this.dataList = this.dataList.map((item, idx) => {
    //     return item;
    //   });
    //   this.dataList.unshift(this.dataList.pop());
    //   this.$refs.wtzl.highLightByName(this.dataList[0].street);
    // }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {
    this.init();
  },
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.appealCount {
  position: relative;
  .title {
    position: absolute;
    color: #fff;
    left: 60px;
    top: 2px;
    font-size: 27px;
    font-weight: 600;
  }
  .count {
    position: absolute;
    bottom: 0px;
    left: 203px;
    font-family: YouSheBiaoTiHei;
    font-size: 36px;
    color: #01fffe;
    span {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 22px;
      color: #01fffe;
      padding-left: 6px;
    }
  }
}
.item-active {
  background: linear-gradient(
    90deg,
    rgba(10, 141, 225, 0.2) 0%,
    rgba(10, 141, 225, 0) 100%
  );
  height: 54px !important;
  padding: 5px 14px 8px 13px !important;
}
.indeName-enter {
  opacity: 0;
  transform: translateY(-25px);
}

.indeName-leave-to {
  opacity: 0;
}

.indeName-enter-active {
  transition: all 0.6s ease;
}

.indeName-leave-active {
  transition: all 0.3s ease;
}

.indeName-move {
  /*下面的 .indeName-move和.indeName-leave-active 配合使用，能够实现列表后续的元素渐渐飘上来的效果*/
  transition: all 0.6s ease;
}

.LetTop {
  position: relative;
  .left {
    padding-top: 52px;
  }
  .bar {
    position: relative;
    width: 100%;
    height: 158px;

    img {
      bottom: 0;
      position: absolute;
      left: 5px;
      right: 0;
    }
  }
  .card {
    margin-top: 16px;
    position: relative;
    & > div {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #ffffff;
      line-height: 26px;
    }
  }
  .main {
    height: 282px;
    margin-top: 24px;
    height: 392px;
    display: flex;
    .left {
      flex: 1;
    }
    .right {
      width: 504px;
      display: flex;
      .icon {
        width: 77px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .list {
        flex: 1;
        overflow: hidden;
        margin-top: -4px;
        .line {
          width: 100%;
          height: 50px;
          padding: 5px 14px 6px 13px;
          margin-bottom: 6px;

          .title {
            display: flex;
            justify-content: space-between;
            font-size: 20px;
            color: #ffffff;
            line-height: 26px;
            letter-spacing: 1px;
            .area {
              display: flex;
              align-items: center;
              & > div {
                width: 12px;
                height: 12px;
                margin-right: 12px;
                background: linear-gradient(180deg, #41c5ff 0%, #1f94ff 100%);
                border-radius: 1px;
                border: 1px solid;
                border-image: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 1),
                    rgba(255, 255, 255, 0)
                  )
                  1 1;
              }
            }
          }
          .scroll {
            width: 100%;
            height: 5px;
            background: rgba(208, 222, 238, 0.1);
            border-radius: 3px;
            margin-top: 8px;
            position: relative;
            & > div {
              width: 40%;
              height: 5px;
              background: linear-gradient(270deg, #00efff 0%, #00527d 100%);
              border-radius: 3px;
            }
            img {
              position: absolute;
              top: -7px;
              left: 40%;
              margin-left: -9px;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
.rightTopSelect {
  width: 160px;
  height: 38px;
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 20px;
}
.LetTop {
  .ant-select-dropdown-content {
    border: 0 !important;
  }
  .ant-select-dropdown-menu {
    background: rgba(39, 61, 118, 1) !important;
  }
  .ant-select-dropdown-menu-item-active {
    background: linear-gradient(180deg, #4796d9 0%, #225db1 100%) !important;
  }
  .ant-select-dropdown {
    width: 160px;
    top: 37px !important;
    left: auto !important;
    right: 10px !important;

    .ant-select-dropdown-menu-item {
      border-bottom: 1px solid rgba(143, 179, 255, 0.16);
      background: #273d76;
      text-align: left;
      font-size: 18px;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }
}
</style>
